<template>
  <div class="header_main">
    <div class="icon">
      <!-- <img class="img" src="@/assets/img/normal-logo.png" /> -->
      <!-- <img class="img" src="@/assets/img/normal-logo-blue.png" /> -->
    </div>
    <div class="search">
      <input type="text" placeholder="搜索" />
      <span class="iconfont icon-fangdajing"> 搜索</span>
    </div>
    <div class="tools">
      <el-button
      v-if="!isLogin"
        class="login"
        color="rgb(254,44,85)"
        size="large"
        type="danger"
        @click="openDialog"
        >登录</el-button
      >
      <span  v-else style="position: relative; left: 170px;">
        <el-dropdown >
          <span style="color:white">
            {{ name }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
        </el-dropdown>
      </span>
    </div>
  </div>
</template>

<script setup>
import{ref,watch,onMounted} from 'vue'
import emiter from '../utils/bus'
import { useLoginstore } from '@/store/isLogin';
import { ArrowDown } from '@element-plus/icons-vue'

let name
const isLogin=ref(false)
const store=useLoginstore()

watch(()=>store.isLogin,(newValue)=>{
  isLogin.value=newValue
  name=window.localStorage.getItem('name')
})
onMounted(()=>{
  if(window.localStorage.getItem('name'))
  store.$patch({isLogin:true})
  else openDialog()
})

const logout=()=>{
  window.localStorage.clear()
  store.$reset()
}
const openDialog = () => {
  emiter.emit('isShow', true)
}
</script>

<style lang="less" scoped>
@black: rgb(22, 24, 35);
@text_weight: 700;
@red: rgb(254, 44, 85);
@white:rgba(123, 121, 121, 0.1);

.header_main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-weight: @text_weight;
  overflow: hidden;
  background-color:@white;
  backdrop-filter: blur(10px);
  box-shadow: 0px 25px 25px 10px @white;

  div {
    width: 300px;
    height: 100%;
    padding: 5px 0 5px 0px;
    box-sizing: border-box;
  }
  .icon{
  }
  .img{
    height:100%;
    object-fit: contain;
  }
  .search {
    display: flex;
    height: 40px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    align-items: center;
    width: 550px; /* 调整搜索框的宽度 */
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 5px;

    input[type='text'] {
      width: 485px;
      line-height: 35px;
      height: 35px;
      padding-left: 15px;

      // 文字样式
      font-weight: @text_weight;
      font-size: 16px;
      color: white;

      // 光标颜色
      caret-color: @red;
    }

    span {
      display: inline-block;
      text-align: center;
      width: 80px;
      height: 50px;
      text-align: center;
      color: white;
      line-height: 50px;
      // background:white;
      &:hover {
        cursor: pointer;
        background-color: white;
        color: @black;
      }
    }
  }

  .tools {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    .login {
      border-radius: 15px;
      margin: 5px;
    }
  }
}

</style>
